<template>
	<view class="page-center">
		<nav-bar title="在找货详情" :showLeftIcon="true" :leftSlot="false"></nav-bar>

		<scroll-view class="content-box" scroll-y>
			<view class="layout demandDetails">
				<view class="title">
					<text>需求详情</text>
				</view>
				<view>
					<text>南京 江宁</text>
					<image style="height: 8rpx;width: 35rpx;" src="@/static/images/mine/to.png" mode="widthFix">
					</image>
					<text> 徐州 铜山</text>
				</view>
				<text>途径点：无</text>
				<view>
					<text>当前联系次数:</text>
					<text>23次</text>
				</view>
				<view>
					<text>预计起止时间:</text>
					<text>2024/09/04-2024/09/04</text>
				</view>
				<view>
					<text>运车车型:</text>
					<text>五板位</text>
				</view>
				<view>
					<text>预计价格区间:</text>
					<text>800-1600元</text>
				</view>
			</view>
		</scroll-view>
		<!-- 电话联系  报价 -->
		<view class="opeart">
			<view class="opeart-btn opeart-quotation">
				<image src="../../../static/images/public/white-phone.png" mode=""></image>
				<text>电话联系</text>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		async onLoad() {},
		methods: {}
	}
</script>

<style lang="scss" scoped>
	.content-box {
		max-height: calc(100vh - 208rpx);
		height: calc(100vh - 208rpx);
		padding: 30rpx;
		padding-top: 0;

		.demandDetails {
			>view {
				&:nth-of-type(2) {
					font-family: "PingFang SC";
					font-size: 30rpx;
					font-style: normal;
					font-weight: 500;
					line-height: normal;
					display: flex;
					align-items: center;

					image {
						margin: 0 12rpx;
					}
				}

				&:nth-of-type(3),
				&:nth-of-type(4),
				&:nth-of-type(5),
				&:nth-of-type(6) {
					display: flex;
					justify-content: space-between;
					margin: 16rpx 0;
					font-size: 28rpx;

					text {
						&:nth-of-type(1) {
							opacity: 0.6;
						}

						&:nth-of-type(2) {
							opacity: 0.9;
						}
					}
				}

				&:nth-of-type(3) {
					margin-top: 20rpx;

					text {
						opacity: 1 !important;
						color: #1777FF;
					}
				}
			}

			>text {
				display: block;
				color: #ff7512;
				font-family: "PingFang SC";
				font-size: 26rpx;
				margin: 16rpx 0;
			}
		}
	}

	.layout {
		margin-top: 20rpx;
		padding: 20rpx 24rpx;
		background: #ffffff;
		border-radius: 12rpx;

		.title {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 10rpx;
			margin-bottom: 20rpx;

			>text {
				font-weight: 550;
			}

			>view {
				display: flex;
				align-items: center;

				text {
					opacity: 0.6;
					font-size: 24rpx;
				}
			}

			&::after {
				position: absolute;
				left: 0;
				top: calc(50% - 12rpx);
				content: '';
				display: inline-block;
				width: 4rpx;
				height: 24rpx;
				background: #1777ff;
			}
		}
	}

	.opeart {
		padding: 16rpx 28rpx;
		display: flex;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100vw;
		background: #fff;

		.opeart-btn {
			flex: 1;
			height: 88rpx;
			border-radius: 16rpx;
			font-size: 32rpx;
			text-align: center;
			line-height: 88rpx;

			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 10rpx;
				vertical-align: middle;
			}
		}

		.opeart-phone {
			color: #1777ff;
			border: 2rpx solid #1777ff;
			margin-right: 20rpx;
		}

		.opeart-quotation {
			background: #1777ff;
			color: #fff;
		}
	}
</style>